<template>
    <div>
        <div class="activity-right">
            <h3>客户端用户列表</h3>
            <el-select style="width:400px" @change="handlChangeStatus" v-model="status" placeholder="选择用户角色">
                <el-option v-for="item in roleArr" :key="item.label" :label="item.value" :value="item.label">
                </el-option>
            </el-select>
            <el-input style="width:400px;" class='input' @keyup.enter.native="search" prefix-icon="el-icon-search" clearable v-model="name"  placeholder="请输入查询信息"></el-input>
            <el-button type="primary" @click.enter="search" icon="el-icon-search">搜索</el-button>
            <el-table class="table-common" :data="tableData" element-loading-text="拼命加载中" style="width: 100%; margin-top:20px;">
                <el-table-column prop="headImage" label="用户头像" width="120" >
                    <template slot-scope="scope">
                        <img :src="scope.row.headImage" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="nickName" label="用户昵称" width="100">
                </el-table-column>
                <el-table-column prop="roleName" label="用户身份" width="100">
                </el-table-column>
                <el-table-column prop="personName" label="用户姓名" width="100">
                </el-table-column>
                <el-table-column prop="verifyPhone" label="用户手机" width="100">
                </el-table-column>
                <el-table-column prop="inviteCode" label="用户邀请码" width="100">
                </el-table-column>
                <el-table-column prop="parentInviteCode" label="父级邀请码" width="100">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="180">
                    <template slot-scope="scope">{{'创建: ' + $formate(scope.row.createTime,'yyyy-MM-dd hh:mm:ss') }}<br/>{{'登陆: ' + $formate(scope.row.latestOnlinetime,'yyyy-MM-dd hh:mm:ss')}} </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editCustomer(scope.row.wxUid)" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <section class="pagination" >
                <el-pagination background layout="total,prev, pager, next,jumper" :page-count="Math.ceil(total/10)" :total="total" :page-size="10" :current-page.sync="page" @current-change="handlePageChange">
                </el-pagination>
            </section>
          
        </div>
    </div>
</template>

<script>
import { searchUser } from "../../data/postData";
export default {
    mounted() {
        let { page, status, name } = this.$store.state.customer;
        this.status = status
        this.name = name
        this.getCustomerList(this.page)
    },
    data() {
        return {
            user: JSON.parse(sessionStorage.getItem("ddaigoUser")),
            tableData: null,
            total: null,
            size: 10,
            page: this.$store.state.customer.customerListPage,
            name: "",
            status: 'null',
            roleArr: [
                        {
                            label: null,
                            value: "全部"
                        },
                        {
                            label: 0,
                            value: "普通用户"
                        },
                        {
                            label: 1,
                            value: "会员"
                        },
                        {
                            label: 2,
                            value: "代购"
                        },{
                            label: 3,
                            value: "经理"
                        },{
                            label: 4,
                            value: "总监"
                        },{
                            label: 10,
                            value: "访客"
                        }
                    ]
        };
    },
    methods: {
        //获取客户端用户列表
        getCustomerList(page) {
            var params = {
                data: {
                    page: page,
                    size: 10,
                    userStatus: this.status,
                    name: this.name,
                }
            };
            this.$fetch.post(searchUser, params).then(res => {
                this.tableData = res.data;
                this.total = res.total;
            }).catch(err => {
                this.$message({
                    message: err.message,
                    type: "warning",
                    duration: 1000
                });
            });
        },
        handlChangeStatus(){
            this.page = 1
            this.getCustomerList(this.page)
            this.$store.dispatch("saveCustomerStatus", this.status);
        },
        search(){
            this.page = 1
            this.$store.dispatch("saveCustomerName", this.name);
            this.getCustomerList(this.page)
        },
        handlePageChange(val) {
            this.page = val;
            this.getCustomerList(this.page);
            this.$store.dispatch("saveCustomerListPage", this.page);
        },
        editCustomer(id){
            this.$router.push({path:'/editCustomer/'+ id})
            this.$store.dispatch("saveCustomerName", this.name);
        },
    }
};
</script>

<style scoped lang="less">
.activity-right {
    width: calc(~"100% - 250px");
    margin-top: 66px;
    margin-left: 230px;
    float: left;
    h3 {
        margin: 20px 0;
    }
    .select_type {
        margin-bottom: 20px;
        position: relative;
        span {
            margin-right: 10px;
        }
        button {
            position: absolute;
            right: 0;
            top: 0;
        }
    }
}
.el-table__body-wrapper {
    margin-top: 15px;
    img {
        width: 60%;
    }
    a {
        color: #409eff;
    }

}
.right {
    float: right;
    z-index: 999999999;
}
.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
</style>